<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.61">
    <script>
      (function() {
        const userMode = localStorage.getItem('vuepress-reco-color-scheme') || 'auto';
        const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (userMode === 'dark' || (userMode === 'auto' && systemDarkMode)) {
          document.documentElement.classList.toggle('dark', true);
        }
      })();
    </script>
    <link rel="icon" href="/icon.png"><title>js笔记2 | FYJ</title><meta name="description" content="Just playing around">
    <link rel="modulepreload" href="/assets/app-5e55c3a9.js"><link rel="modulepreload" href="/assets/framework-9675d465.js"><link rel="modulepreload" href="/assets/jsbiji2.html-6c330c31.js"><link rel="modulepreload" href="/assets/jsbiji2.html-0ce3d86b.js"><link rel="prefetch" href="/assets/index.html-6d5e9dd3.js" as="script"><link rel="prefetch" href="/assets/index.html-3d8b60b2.js" as="script"><link rel="prefetch" href="/assets/index.html-a7cfb774.js" as="script"><link rel="prefetch" href="/assets/index.html-1a66ce3d.js" as="script"><link rel="prefetch" href="/assets/index.html-a2322c32.js" as="script"><link rel="prefetch" href="/assets/index.html-2b8e88d2.js" as="script"><link rel="prefetch" href="/assets/index.html-36817084.js" as="script"><link rel="prefetch" href="/assets/index.html-c05495db.js" as="script"><link rel="prefetch" href="/assets/index.html-3cf0f594.js" as="script"><link rel="prefetch" href="/assets/index.html-33a8693c.js" as="script"><link rel="prefetch" href="/assets/index.html-80880afd.js" as="script"><link rel="prefetch" href="/assets/index.html-df5b0273.js" as="script"><link rel="prefetch" href="/assets/index.html-d608509e.js" as="script"><link rel="prefetch" href="/assets/index.html-ac9bff28.js" as="script"><link rel="prefetch" href="/assets/index.html-d251d55d.js" as="script"><link rel="prefetch" href="/assets/index.html-d299a2c9.js" as="script"><link rel="prefetch" href="/assets/index.html-c8596e07.js" as="script"><link rel="prefetch" href="/assets/index.html-ce42ac51.js" as="script"><link rel="prefetch" href="/assets/index.html-e1e2c2da.js" as="script"><link rel="prefetch" href="/assets/index.html-49c6b4a8.js" as="script"><link rel="prefetch" href="/assets/index.html-3880c1f3.js" as="script"><link rel="prefetch" href="/assets/index.html-b5b12757.js" as="script"><link rel="prefetch" href="/assets/index.html-6cf06f14.js" as="script"><link rel="prefetch" href="/assets/index.html-1a88d37b.js" as="script"><link rel="prefetch" href="/assets/index.html-c8e98ed0.js" as="script"><link rel="prefetch" href="/assets/index.html-d7cf9c00.js" as="script"><link rel="prefetch" href="/assets/git.html-0da1c675.js" as="script"><link rel="prefetch" href="/assets/html5meitiyuansu.html-4654ddc1.js" as="script"><link rel="prefetch" href="/assets/duoliebuju.html-54f235b4.js" as="script"><link rel="prefetch" href="/assets/DOM__BOM.html-b97d346f.js" as="script"><link rel="prefetch" href="/assets/jsbiji.html-a3fbc3f8.js" as="script"><link rel="prefetch" href="/assets/RESTheAJAX.html-17e205d8.js" as="script"><link rel="prefetch" href="/assets/shuxingmiaoshufu.html-08b53360.js" as="script"><link rel="prefetch" href="/assets/liulanqixuanranyuanli.html-3208ecf3.js" as="script"><link rel="prefetch" href="/assets/zhonghuievent-loop.html-7baa2b76.js" as="script"><link rel="prefetch" href="/assets/mongodb.html-ad7d95ea.js" as="script"><link rel="prefetch" href="/assets/mongoose.html-31658686.js" as="script"><link rel="prefetch" href="/assets/express.html-042999ef.js" as="script"><link rel="prefetch" href="/assets/httpxieyi.html-abaf3902.js" as="script"><link rel="prefetch" href="/assets/httpmokuai.html-9408a820.js" as="script"><link rel="prefetch" href="/assets/nodejs.html-8df1574a.js" as="script"><link rel="prefetch" href="/assets/nodejshexinmokuai.html-72c9480b.js" as="script"><link rel="prefetch" href="/assets/promise.html-85e3fffc.js" as="script"><link rel="prefetch" href="/assets/webpackhevite.html-a09bf01e.js" as="script"><link rel="prefetch" href="/assets/huihuakongzhi.html-86d8c25d.js" as="script"><link rel="prefetch" href="/assets/baoguanliqi.html-86b29b9f.js" as="script"><link rel="prefetch" href="/assets/mokuaihua.html-67d4835d.js" as="script"><link rel="prefetch" href="/assets/fangdaolian.html-932412c5.js" as="script"><link rel="prefetch" href="/assets/typescript.html-0bd71496.js" as="script"><link rel="prefetch" href="/assets/vue-router3.html-09f47896.js" as="script"><link rel="prefetch" href="/assets/vue2(2).html-10c04317.js" as="script"><link rel="prefetch" href="/assets/vue2.html-82b6d2df.js" as="script"><link rel="prefetch" href="/assets/vue2zujiantongxin.html-56d49820.js" as="script"><link rel="prefetch" href="/assets/vueRouter3lanjiazaishiyongdewenti.html-3ffca1f7.js" as="script"><link rel="prefetch" href="/assets/Vuex3.html-e24f4da6.js" as="script"><link rel="prefetch" href="/assets/api.html-b73a9946.js" as="script"><link rel="prefetch" href="/assets/home.html-746a4c0d.js" as="script"><link rel="prefetch" href="/assets/plugin.html-6a7b36ed.js" as="script"><link rel="prefetch" href="/assets/theme.html-6037defd.js" as="script"><link rel="prefetch" href="/assets/121501.html-8973c891.js" as="script"><link rel="prefetch" href="/assets/404.html-60b35caa.js" as="script"><link rel="prefetch" href="/assets/index.html-101169bd.js" as="script"><link rel="prefetch" href="/assets/index.html-c05f203a.js" as="script"><link rel="prefetch" href="/assets/index.html-0c6bc7be.js" as="script"><link rel="prefetch" href="/assets/index.html-0fe42912.js" as="script"><link rel="prefetch" href="/assets/index.html-35698f58.js" as="script"><link rel="prefetch" href="/assets/index.html-a9998c9a.js" as="script"><link rel="prefetch" href="/assets/index.html-e03acce1.js" as="script"><link rel="prefetch" href="/assets/index.html-936bfd18.js" as="script"><link rel="prefetch" href="/assets/index.html-3b167d99.js" as="script"><link rel="prefetch" href="/assets/index.html-6a7e33f2.js" as="script"><link rel="prefetch" href="/assets/index.html-00dc6c81.js" as="script"><link rel="prefetch" href="/assets/index.html-c386c5b9.js" as="script"><link rel="prefetch" href="/assets/index.html-62cab89d.js" as="script"><link rel="prefetch" href="/assets/index.html-c6f54c68.js" as="script"><link rel="prefetch" href="/assets/index.html-5fc54677.js" as="script"><link rel="prefetch" href="/assets/index.html-96867bd4.js" as="script"><link rel="prefetch" href="/assets/index.html-452a2070.js" as="script"><link rel="prefetch" href="/assets/index.html-500c2666.js" as="script"><link rel="prefetch" href="/assets/index.html-d797d831.js" as="script"><link rel="prefetch" href="/assets/index.html-84073cb9.js" as="script"><link rel="prefetch" href="/assets/index.html-8dfee4a9.js" as="script"><link rel="prefetch" href="/assets/index.html-a675820e.js" as="script"><link rel="prefetch" href="/assets/index.html-948f048e.js" as="script"><link rel="prefetch" href="/assets/index.html-522daa8a.js" as="script"><link rel="prefetch" href="/assets/index.html-4d67ded2.js" as="script"><link rel="prefetch" href="/assets/index.html-8caf183d.js" as="script"><link rel="prefetch" href="/assets/git.html-9cef5060.js" as="script"><link rel="prefetch" href="/assets/html5meitiyuansu.html-cd096af4.js" as="script"><link rel="prefetch" href="/assets/duoliebuju.html-4e591000.js" as="script"><link rel="prefetch" href="/assets/DOM__BOM.html-518d085e.js" as="script"><link rel="prefetch" href="/assets/jsbiji.html-f1c6b5c4.js" as="script"><link rel="prefetch" href="/assets/RESTheAJAX.html-174a11fd.js" as="script"><link rel="prefetch" href="/assets/shuxingmiaoshufu.html-12f7f1aa.js" as="script"><link rel="prefetch" href="/assets/liulanqixuanranyuanli.html-e15be5a7.js" as="script"><link rel="prefetch" href="/assets/zhonghuievent-loop.html-993374db.js" as="script"><link rel="prefetch" href="/assets/mongodb.html-06aa4d45.js" as="script"><link rel="prefetch" href="/assets/mongoose.html-f6a2c1e1.js" as="script"><link rel="prefetch" href="/assets/express.html-c34de6a8.js" as="script"><link rel="prefetch" href="/assets/httpxieyi.html-393ba2a3.js" as="script"><link rel="prefetch" href="/assets/httpmokuai.html-84b55eda.js" as="script"><link rel="prefetch" href="/assets/nodejs.html-2ee518f3.js" as="script"><link rel="prefetch" href="/assets/nodejshexinmokuai.html-fabb53b0.js" as="script"><link rel="prefetch" href="/assets/promise.html-34216aec.js" as="script"><link rel="prefetch" href="/assets/webpackhevite.html-aac8da2d.js" as="script"><link rel="prefetch" href="/assets/huihuakongzhi.html-1540a73e.js" as="script"><link rel="prefetch" href="/assets/baoguanliqi.html-d4dece61.js" as="script"><link rel="prefetch" href="/assets/mokuaihua.html-2cfeca4a.js" as="script"><link rel="prefetch" href="/assets/fangdaolian.html-4c95566c.js" as="script"><link rel="prefetch" href="/assets/typescript.html-3e2bf303.js" as="script"><link rel="prefetch" href="/assets/vue-router3.html-fa748c7b.js" as="script"><link rel="prefetch" href="/assets/vue2(2).html-b4107b02.js" as="script"><link rel="prefetch" href="/assets/vue2.html-dfda70b7.js" as="script"><link rel="prefetch" href="/assets/vue2zujiantongxin.html-4cf781c8.js" as="script"><link rel="prefetch" href="/assets/vueRouter3lanjiazaishiyongdewenti.html-a5f191aa.js" as="script"><link rel="prefetch" href="/assets/Vuex3.html-68ef32c1.js" as="script"><link rel="prefetch" href="/assets/api.html-710c8c92.js" as="script"><link rel="prefetch" href="/assets/home.html-b45de374.js" as="script"><link rel="prefetch" href="/assets/plugin.html-2075a048.js" as="script"><link rel="prefetch" href="/assets/theme.html-5b5f0e80.js" as="script"><link rel="prefetch" href="/assets/121501.html-865346dc.js" as="script"><link rel="prefetch" href="/assets/404.html-eab7b035.js" as="script"><link rel="prefetch" href="/assets/reco-valine-a0c1af1f.js" as="script">
    <link rel="preload" href="/assets/style-887583e0.css" as="style"><link rel="stylesheet" href="/assets/style-887583e0.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><div class="common-wrapper series--no show-catalog"><div><header class="navbar-container"><!--[--><div class="site-brand nav-item"><img class="logo" src="/logo.png" alt="FYJ"><a href="/" class="site-name can-hide">FYJ</a></div><div class="nav-item navbar-links-wrapper" style=""><div><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form></div><nav class="navbar-links"><!--[--><div class="navbar-links__item"><a href="/" class="link router-link-active" aria-label="Home"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Home<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/categories/html-note/1/" class="link" aria-label="分类"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->分类<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/tags/html5/1/" class="link" aria-label="标签"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->标签<!--]--></span></span><!--[--><!--]--></a></div><!--]--></nav><span class="xicon-container btn-toggle-dark-mode btn--dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M15 2h2v3h-2z" fill="currentColor"></path><path d="M27 15h3v2h-3z" fill="currentColor"></path><path d="M15 27h2v3h-2z" fill="currentColor"></path><path d="M2 15h3v2H2z" fill="currentColor"></path><path d="M5.45 6.884l1.414-1.415l2.121 2.122l-1.414 1.414z" fill="currentColor"></path><path d="M23 7.58l2.121-2.12l1.414 1.414l-2.121 2.121z" fill="currentColor"></path><path d="M23.002 24.416l1.415-1.414l2.12 2.122l-1.413 1.414z" fill="currentColor"></path><path d="M5.47 25.13L7.59 23L9 24.42l-2.12 2.12l-1.41-1.41z" fill="currentColor"></path><path d="M16 8a8 8 0 1 0 8 8a8 8 0 0 0-8-8zm0 14a6 6 0 0 1 0-12z" fill="currentColor"></path></svg></span><span class="xicon-container btn-toggle-menus"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><circle cx="16" cy="8" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="24" r="2" fill="currentColor"></circle></svg></span></div><!--]--></header><div class="mobile-menus-container"><nav class="navbar-links mobile"><!--[--><div class="navbar-links__item"><a href="/" class="link router-link-active" aria-label="Home"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Home<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/categories/html-note/1/" class="link" aria-label="分类"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->分类<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/tags/html5/1/" class="link" aria-label="标签"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->标签<!--]--></span></span><!--[--><!--]--></a></div><!--]--></nav><div class="appearance"><span>Appearance</span><span class="xicon-container btn-toggle-dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M15 2h2v3h-2z" fill="currentColor"></path><path d="M27 15h3v2h-3z" fill="currentColor"></path><path d="M15 27h2v3h-2z" fill="currentColor"></path><path d="M2 15h3v2H2z" fill="currentColor"></path><path d="M5.45 6.884l1.414-1.415l2.121 2.122l-1.414 1.414z" fill="currentColor"></path><path d="M23 7.58l2.121-2.12l1.414 1.414l-2.121 2.121z" fill="currentColor"></path><path d="M23.002 24.416l1.415-1.414l2.12 2.122l-1.413 1.414z" fill="currentColor"></path><path d="M5.47 25.13L7.59 23L9 24.42l-2.12 2.12l-1.41-1.41z" fill="currentColor"></path><path d="M16 8a8 8 0 1 0 8 8a8 8 0 0 0-8-8zm0 14a6 6 0 0 1 0-12z" fill="currentColor"></path></svg></span></div></div><div class="series-mask"></div><aside class="series-container"><div class="site-brand"><img class="logo" src="/logo.png" alt="FYJ"><a href="/" class="site-name can-hide">FYJ</a></div><!--[--><!--]--></aside><!--[--><main class="page-container"><h1 class="page-title">js笔记2</h1><div class="page-info"><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M16 4a5 5 0 1 1-5 5a5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7a7 7 0 0 0-7-7z" fill="currentColor"></path><path d="M26 30h-2v-5a5 5 0 0 0-5-5h-6a5 5 0 0 0-5 5v5H6v-5a7 7 0 0 1 7-7h6a7 7 0 0 1 7 7z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->fyj<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2023/04/30<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M11.17 6l3.42 3.41l.58.59H28v16H4V6h7.17m0-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H16l-3.41-3.41A2 2 0 0 0 11.17 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->javascript-note<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M10 14a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4zm0-6a2 2 0 1 0 1.998 2.004A2.002 2.002 0 0 0 10 8z" fill="currentColor"></path><path d="M16.644 29.415L2.586 15.354A2 2 0 0 1 2 13.941V4a2 2 0 0 1 2-2h9.941a2 2 0 0 1 1.414.586l14.06 14.058a2 2 0 0 1 0 2.828l-9.943 9.943a2 2 0 0 1-2.829 0zM4 4v9.942L18.058 28L28 18.058L13.942 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->JavaScript<!--]--></span></span><!----></div><div class="theme-reco-default-content"><div><h2 id="严格模式" tabindex="-1"><a class="header-anchor" href="#严格模式" aria-hidden="true">#</a> 严格模式</h2><p>JS 运行代码的模式有两种：</p><ul><li><p>正常模式</p><ul><li>默认情况下代码都运行在正常模式中，在正常模式，语法检查并不严格, 它的原则是：能不报错的地方尽量不报错</li><li>这种处理方式导致代码的运行性能较差</li></ul></li><li><p>严格模式</p><ul><li><p>在严格模式下，语法检查变得严格</p><p>1.禁止一些语法</p><p>2.更容易报错</p><p>3.提升了性能</p></li><li><p>在开发中，应该尽量使用严格模式，这样可以将一些隐藏的问题消灭在萌芽阶段，同时也能提升代码的运行性能</p></li></ul></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token string">&quot;use strict&quot;</span><span class="token punctuation">;</span> <span class="token comment">// 全局的严格模式</span>

<span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token string">&quot;use strict&quot;</span><span class="token punctuation">;</span> <span class="token comment">// 函数的严格的模式</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="面向对象" tabindex="-1"><a class="header-anchor" href="#面向对象" aria-hidden="true">#</a> 面向对象</h2><blockquote><p>面向对象编程(OOP)</p><ol><li>程序是干嘛的？</li></ol><ul><li>程序就是对显示事件的抽象。（照片就是对人的抽象）</li></ul><ol start="2"><li>对象是干嘛的？</li></ol><ul><li>一个事物抽象到程序中后就变成了对象。</li><li>在程序的世界中，一切皆对象 。</li></ul><ol start="3"><li>面向对象的编程</li></ol><ul><li>面向对象的编程指，程序中的所有操作都是通过对象来完成。</li><li>做任何事情之前都先需要找到它的对象。</li></ul></blockquote><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">/*
    一个人
        - 一个事物通常由两个部分组成：数据和功能
        - 一个对象通常由两个部分组成：属性和方法
        -事物的数据到了对象中，体现为属性
        -事物的功能到了对象中，体现为方法
*/</span>
<span class="token keyword">const</span> people <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;人&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
    <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">180</span><span class="token punctuation">,</span>
    <span class="token literal-property property">weight</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
    <span class="token function-variable function">sleep</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">+</span> <span class="token string">&#39;睡觉&#39;</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>people<span class="token punctuation">.</span><span class="token function">sleep</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_1-类class" tabindex="-1"><a class="header-anchor" href="#_1-类class" aria-hidden="true">#</a> 1.类class</h3><p><strong>使用Object创建对象的问题:</strong></p><ul><li>1.无法区分出不同类型的对象</li><li>2.不方便批量创建对象</li></ul><p><strong>在JS中可以通过类(class)来解决这个问题：</strong></p><ul><li><p>1.类是对象模板，可以将对象中的属性和方法直接定义在类中定义后，就可以直接通过类来创建对象</p></li><li><p>2.**<code>①</code><strong>通过同一个类创建的对象，我们称为同类对象</strong><code>②</code><strong>可以使用instanceof来检查一个对象是否由于某个类创建</strong><code>③</code>**如果某个对象是由某个类所创建，则我们称该对象是这个类的实例</p><p>语法：</p></li><li><p>class类名{}//类名要使用大驼峰命名法</p></li><li><p>const 类名 = class()</p><p>通过类创建对象 new 类()</p></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//Person类专门用来创建人的对象</span>
<span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  	
<span class="token keyword">const</span> p1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">//调用构造函数创建对象</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p1 <span class="token keyword">instanceof</span> <span class="token class-name">Person</span><span class="token punctuation">)</span><span class="token comment">//true</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>类的代码块，默认就是严格模式。</p><p>类的代码块是用来设置对象的属性的，不是什么代码都能写</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
     name <span class="token operator">=</span> <span class="token string">&quot;孙悟空&quot;</span><span class="token comment">//Person的实例属性name</span>
     age <span class="token operator">=</span> <span class="token number">18</span> <span class="token comment">//实例属性只能通过实例访问</span>
      <span class="token keyword">static</span> test <span class="token operator">=</span> <span class="token string">&quot;test静态属性&quot;</span> <span class="token comment">//使用static声明的属性，是静态属性(类属性)</span>
      <span class="token keyword">static</span> hh <span class="token operator">=</span> <span class="token string">&quot;静态属性&quot;</span><span class="token comment">//静态属性只能通过类访问 Person.hh</span>
<span class="token punctuation">}</span>
	 console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Person<span class="token punctuation">.</span>test<span class="token punctuation">)</span><span class="token comment">//test静态属性</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Person<span class="token punctuation">.</span>hh<span class="token punctuation">)</span><span class="token comment">//静态属性</span>
        <span class="token keyword">const</span> p1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token keyword">const</span> p2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p1<span class="token punctuation">)</span><span class="token comment">//</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p2<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_2-方法" tabindex="-1"><a class="header-anchor" href="#_2-方法" aria-hidden="true">#</a> 2.方法</h3><p>方法也是对象的一个属性，只不过这个属性的值是一个函数</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code> <span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
            name <span class="token operator">=</span> <span class="token string">&quot;孙悟空&quot;</span>
            <span class="token comment">//sayHello = function(){} 添加方法的一种方式</span>
            <span class="token comment">// sayHello() {}添加方法(实例方法) 实例方法中this就是当前实例</span>
            <span class="token keyword">static</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;我是静态方法&quot;</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span>
                <span class="token comment">// 静态方法（类方法），通过类来调用 静态方法中this指向的是当前类</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
       <span class="token keyword">const</span> p1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token comment">// console.log(p1)</span>
        <span class="token comment">// Person.test()</span>
       p1<span class="token punctuation">.</span><span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">//大家好，我是孙悟空</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_3-构造函数" tabindex="-1"><a class="header-anchor" href="#_3-构造函数" aria-hidden="true">#</a> 3.构造函数</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
        <span class="token comment">// class Person {</span>
        <span class="token comment">//当我们在类中直接指定实例属性的值时，</span>
        <span class="token comment">// 意味着我们创建的所有对象的属性都是这个值</span>
        <span class="token comment">//     name = &quot;孙悟空&quot;</span>
        <span class="token comment">// }</span>
        <span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
            <span class="token comment">// 在类中可以添加一个特殊的方法constructor</span>
            <span class="token comment">// 构造是类中定义的一个函数</span>
            <span class="token comment">//该方法我们称为构造方法(构造函数)</span>
            <span class="token comment">// 构造函数会在我们调用类创建对象时执行</span>
            <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> gender</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token comment">// console.log(&quot;构造函数执行了~~~&quot;, name, age, gender)</span>
                <span class="token comment">// 可以在构造函数中，为实例属性进行赋值</span>
                <span class="token comment">// 在构造函数中，this表示当前所创建的对象</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name
                <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age
                <span class="token keyword">this</span><span class="token punctuation">.</span>gender <span class="token operator">=</span> gender
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">const</span> p1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">&#39;张三&#39;</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token string">&quot;男&quot;</span><span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p1<span class="token punctuation">)</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_4-封装" tabindex="-1"><a class="header-anchor" href="#_4-封装" aria-hidden="true">#</a> 4.封装</h3><p><strong>面向对象特点：</strong></p><ol><li>封装</li><li>继承</li><li>多态</li></ol><p><strong>1.封装</strong></p><ul><li>对象就是一个用来存储不同属性的容器。</li><li>对象不仅负责属性，还要负责数据的安全。</li><li>直接添加到对象的属性，并不安全，因为它们可以被任意修改。</li></ul><p><strong>如何确保数据安全：</strong></p><ol><li>私有化数据 <ul><li>将需要保护的数据设置为私有，只能在类内部调用。</li></ul></li><li>提供setter和getter方法来开放我们对数据的操作 <ul><li>属性设置私有，通过<code>getter</code>和<code>setter</code>方法操作属性带来的<strong>好处</strong><ol><li>可以控制属性的读写权限。</li><li>可以在方法中对数学的值进行验证。</li></ol></li></ul></li></ol><ul><li>实现封装的方式： <ol><li>属性私有化 加#。</li><li>通过setter和getter方法来操作属性。</li></ol></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">get</span> <span class="token function">属性名</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>#属性
<span class="token punctuation">}</span>

<span class="token keyword">set</span> <span class="token function">属性名</span><span class="token punctuation">(</span><span class="token parameter">参数</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token keyword">this</span><span class="token punctuation">.</span>#属性 <span class="token operator">=</span> 参数
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
  <span class="token comment">// #address = &quot;花果山&quot;</span>
  <span class="token comment">// 实例使用#开头就变成了私有属性，私有属性只能在类内部访问</span>

  <span class="token comment">// 私有属性要先声明才能使用</span>
  #name<span class="token punctuation">;</span>
  #age<span class="token punctuation">;</span>
  #gender<span class="token punctuation">;</span>

  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age<span class="token punctuation">,</span> gender</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>#name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>#age <span class="token operator">=</span> age<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>#gender <span class="token operator">=</span> gender<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>#name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// getter方法，用来读取属性</span>
  <span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>#name<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// setter方法，用来设置属性</span>
  <span class="token function">setName</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>#name <span class="token operator">=</span> name<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">getAge</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>#age<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// 不推荐加if判断的写法</span>
  <span class="token function">setAge</span><span class="token punctuation">(</span><span class="token parameter">age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>age <span class="token operator">&gt;=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>#age <span class="token operator">=</span> age<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">get</span> <span class="token function">gender</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>#gender<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">set</span> <span class="token function">gender</span><span class="token punctuation">(</span><span class="token parameter">gender</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>#gender <span class="token operator">=</span> gender<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> p1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">,</span> <span class="token string">&quot;男&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// p1.age = &quot;hello&quot;</span>

<span class="token comment">// p1.getName()</span>
p1<span class="token punctuation">.</span><span class="token function">setAge</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">11</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// p1.age = 11  p1.age</span>

<span class="token comment">// p1.setName(&#39;猪八戒&#39;)</span>

p1<span class="token punctuation">.</span>gender <span class="token operator">=</span> <span class="token string">&quot;女&quot;</span><span class="token punctuation">;</span> <span class="token comment">// 修改不了属性gender，它是私有的#gender</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p1<span class="token punctuation">.</span>gender<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 男，可以实例对象.属性名来读取</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_5-多态" tabindex="-1"><a class="header-anchor" href="#_5-多态" aria-hidden="true">#</a> 5.多态</h3><ul><li><p>在 JS 中不会检查参数的类型，所以这就意味着任何数据都可以作为参数传递</p></li><li><p>要调用某个函数，无需指定的类型，只要对象满足某些条件即可</p></li><li><p>多态就是要调用某个函数的时候，不检查函数的参数类型，而是关心参数的特点，</p><p>只要参数满足某些特点或条件，参数就是合法的，可以使用，</p></li></ul><p><strong>即函数的参数的数据类型可以是任意类型，这就是多态！</strong></p><ul><li>如果一个东西走路像鸭子，叫起来像鸭子，那么程序就认为它就是鸭子</li><li>多态为我们提供了灵活性</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">class</span> <span class="token class-name">Dog</span> <span class="token punctuation">{</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> d <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Dog</span><span class="token punctuation">(</span><span class="token string">&#39;旺财&#39;</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">&#39;孙悟空&#39;</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span>

<span class="token keyword">function</span> <span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上</span>
    <span class="token comment">// if(obj instanceof Person){</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;Hello&quot;</span><span class="token punctuation">,</span> obj<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// }</span>
<span class="token punctuation">}</span>
<span class="token function">sayHello</span><span class="token punctuation">(</span>d<span class="token punctuation">)</span>
<span class="token function">sayHello</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_6-继承" tabindex="-1"><a class="header-anchor" href="#_6-继承" aria-hidden="true">#</a> 6.继承</h3><ul><li>可以通过 extends 关键来完成继承</li><li>简单理解：当一个类继承另一个类时，就相当于将另一个类中的代码复制到了当前类中(简单理解)</li><li>继承发生时，被继承的类称为 父类（或超类），继承的类称为 子类</li><li>通过继承可以减少重复的代码，并且可以在不修改一个类的前提对其进行扩展</li><li><strong>有了类，就不需要再用原型 prototype 继承了，可以把公共的属性和方法放在父类里</strong></li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">class</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;动物在叫~&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">//继承</span>
<span class="token keyword">class</span> <span class="token class-name">Dog</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Cat</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token keyword">const</span> dog <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Dog</span><span class="token punctuation">(</span><span class="token string">&quot;旺财&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 继承了父类Animal的构造函数</span>
<span class="token keyword">const</span> cat <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Cat</span><span class="token punctuation">(</span><span class="token string">&quot;汤姆&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

dog<span class="token punctuation">.</span><span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">// 因为是继承，可以调用父类Animal的普通方法</span>
cat<span class="token punctuation">.</span><span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul><li>通过继承可以在不修改一个类的情况下对其进行扩展</li><li><strong>OCP 开闭原则: 程序应该对修改关闭，对扩展开放</strong></li><li>子类可以重写父类的同名方法</li><li>特殊：子类重写父类的构造函数 constructor()时，子类必须在自己的 constructor()里调用 super(), 并且 super()要位于第一行</li><li>子类的方法中可以使用 super 来调用父类的方法</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code> <span class="token keyword">class</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span>
     <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name
     <span class="token punctuation">}</span>
     <span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;动物在叫~&quot;</span><span class="token punctuation">)</span>
     <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
 <span class="token keyword">class</span> <span class="token class-name">Dog</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span>
     <span class="token comment">// 在子类中，可以通过创建同名方法来重写父类的方法</span>
     <span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;汪汪汪&quot;</span><span class="token punctuation">)</span>
     <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
 <span class="token keyword">class</span> <span class="token class-name">Cat</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span>
     <span class="token comment">// 重写构造函数</span>
     <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token comment">// 重写构造函数时，构造函数的第一行代码必须为super()</span>
         <span class="token keyword">super</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token comment">//调用父类的构造函数</span>
         <span class="token comment">// 重新给把name传给父类 由父类进行赋值</span>
         <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age
         <span class="token comment">// 自己赋值</span>
         <span class="token comment">// this.name = name</span>
     <span class="token punctuation">}</span>
     <span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
         <span class="token comment">// 调用一下父类的sayHello</span>
         <span class="token keyword">super</span><span class="token punctuation">.</span><span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">//在方法中可以使用super来引用父类的方法</span>
         console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;喵喵喵&quot;</span><span class="token punctuation">)</span>
     <span class="token punctuation">}</span>
 <span class="token punctuation">}</span>
 <span class="token keyword">const</span> dog <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Dog</span><span class="token punctuation">(</span><span class="token string">&quot;旺财&quot;</span><span class="token punctuation">)</span>
 <span class="token keyword">const</span> cat <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Cat</span><span class="token punctuation">(</span><span class="token string">&quot;汤姆&quot;</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span>
 dog<span class="token punctuation">.</span><span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
 cat<span class="token punctuation">.</span><span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
 console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>dog<span class="token punctuation">)</span>
 console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>cat<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_7-对象的结构" tabindex="-1"><a class="header-anchor" href="#_7-对象的结构" aria-hidden="true">#</a> 7.对象的结构</h3><p>对象中存储属性的区域实际有两个：</p><ol><li><strong>对象自身</strong></li></ol><ul><li><p>直接通过对象所添加的属性，位于对象自身中，一般是点语法，</p><p>例如：p.address = &quot;花果山&quot;</p></li><li><p>在类 class 中通过 x = y 的形式添加的属性，位于对象自身中，</p><p>例如：age = 18</p></li></ul><ol start="2"><li><strong>原型对象（prototype）</strong></li></ol><ul><li>对象中还有一些内容，会存储到其他的对象里（原型对象）</li><li>在对象中会有一个属性用来存储原型对象 prototype，这个属性叫做____proto____(<strong>在对象自身中总会有</strong><strong><strong>proto</strong></strong>)</li><li>每个函数都有 prototype，只有函数才有 prototype</li><li>原型对象也负责为对象存储属性，当我们访问对象中的属性时，会优先访问对象自身的属性，对象自身没有该属性时，才会去原型对象中寻找</li><li>属性会添加到原型对象中的情况：</li></ul><ol><li><p>在类中通过 xxx(){}方式添加的方法，位于原型 prototype 中，例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 位于原型 prototype</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;Hello，我是&quot;</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>主动向原型中添加的属性或方法, 例如：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">do</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span>
<span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>nation <span class="token operator">=</span> <span class="token string">&#39;china&#39;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>prototype 上的方法是给实例对象使用的</p></li></ol><p>4.构造函数和原型对象 prototype 中的 this 都指向实例化的对象</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
  name <span class="token operator">=</span> <span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">;</span> <span class="token comment">// 位于对象自身中</span>
  age <span class="token operator">=</span> <span class="token number">18</span><span class="token punctuation">;</span> <span class="token comment">// 位于对象自身中</span>

  <span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">//位于原型prototype中，有了类class就无需再使用prototype了</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;Hello，我是&quot;</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
p<span class="token punctuation">.</span>address <span class="token operator">=</span> <span class="token string">&quot;花果山&quot;</span><span class="token punctuation">;</span>
p<span class="token punctuation">.</span>sayHello <span class="token operator">=</span> <span class="token string">&quot;hello&quot;</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_8-原型" tabindex="-1"><a class="header-anchor" href="#_8-原型" aria-hidden="true">#</a> 8.原型</h3><p>访问一个对象的原型对象，有 2 种访问方式，这 2 种方式得到的结果一模一样:</p><ol><li>对象.<strong><strong>proto</strong></strong> --&gt; 不要用等号给它赋值。即禁止写：对象.<strong><strong>proto</strong></strong>= xxx</li><li>Object.getPrototypeOf(对象)</li></ol><p>备注：一般在编程语言中以<strong>下划线开头</strong>的属性都是<strong>隐藏属性</strong>, 隐藏属性就是不希望你直接访问的属性</p><p><strong>原型对象 prototype 中的数据</strong>：</p><ol><li>对象中的数据（属性、方法等）</li><li>constructor（对象的构造函数）: prototype 中的 constructor <strong>指向对象的构造函数</strong>，</li></ol><p>就是为了识别对象的类型，看对象是由哪个类创建的</p><p>例如：为什么打印输出 Person 类的实例对象 Person {name: &#39;孙悟空&#39;，age:18}，</p><p>它怎么知道这个对象是 Person 对象？</p><p>就是因为在对象的 <code>prototype</code> 中有 <code>constructor</code>,通过 <code>constructor</code> 判断出了对象的类型，当 constructor 判断出了对象是 Person 对象，打印输出时，就可以看到 Person {name: &#39;孙悟空&#39;，age:18}</p><p><strong>注意：</strong></p><ul><li>原型对象也有原型，这样就构成了一条原型链，根据对象的复杂程度不同，原型链的长度也不同： <ul><li>p 对象的原型链：p 对象 --&gt; 原型 --&gt; 原型 --&gt; null</li><li>obj 对象的原型链：obj 对象 --&gt; 原型 --&gt; null</li></ul></li></ul><p><strong>原型链：</strong></p><ul><li>读取对象属性时，会优先读取对象自身属性，</li><li>如果对象中有，则使用，没有则去对象的原型中寻找</li><li>如果原型中有，则使用，没有则去原型的原型中寻找</li><li>直到找到 Object 对象的原型（Object 的原型没有原型（为 null））</li><li>如果依然没有找到，则返回 undefined</li></ul><p>原型链和作用域链的区别：</p><ul><li>作用域链，是找变量的链，找不到会报错</li><li>原型链，是找属性的链，找不到会返回 undefined</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
  name <span class="token operator">=</span> <span class="token string">&quot;孙悟空&quot;</span>
  age <span class="token operator">=</span> <span class="token number">18</span>
  <span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 位于原型prototype中</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;Hello，我是&quot;</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>__proto__<span class="token punctuation">.</span>__proto__<span class="token punctuation">.</span>__proto__<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>constructor<span class="token punctuation">)</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token comment">// obj.__proto__</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>所有的同一个类的实例对象它们的原型对象都是同一个，也就意味着，同类型对象的原型链是一样的</p><p><strong>原型的作用</strong>：</p><p>原型就相当于是一个公共的区域，可以被所有该类的实例对象访问，可以将该类实例中的所有的公共属性（方法）统一存储到原型中, 这样我们只需要创建一个属性，即可被所有实例访问</p><p><strong>原型继承</strong>：</p><p>JS 中继承就是通过原型来实现的, 当继承时，子类的原型就是一个父类的实例 ！！</p><p>例如：cat.prototype = new Animal() // 子类 cat 继承了父类 Animal</p><p>在对象中有些值是对象独有的，比如属性（name，age，gender）每个对象都应该有自己值，但是有些值对于每个对象来说都是一样的，比如各种方法，对于这些一样的值没必要重复的创建，公共的属性和方法可以放到原型上</p><p>-------------- 以下知识点主要用于面试 但也有利于理解 JS，只是开发中不这么做 -----------------</p><p>大部分情况下，我们是不需要修改原型对象，需要修改原型的情况几乎不存在！</p><p>注意：千万不要通过类的实例去修改原型，因为：</p><ol><li>通过一个对象影响所有同一个类的对象，这么做不合适</li><li>修改原型先得创建实例，麻烦</li><li>危险</li></ol><p>除了通过<strong>proto</strong>能访问对象的原型外，还可以通过类的 prototype 属性，来访问实例的原型, 修改原型时，最好通过类去修改，即直接用类名去修改</p><p>好处：</p><ol><li>一修改就是修改所有实例的原型</li><li>无需创建实例即可完成对类的修改</li></ol><p>原则：</p><ol><li>原型尽量不要手动改</li><li>要改也不要通过实例对象去改</li><li>通过 类.prototype 属性去修改</li><li>最好不要直接给 prototype 去赋值，会覆盖掉 prototype，等于破坏了原来的原型链</li></ol><p>即不要 Person.prototype = { 代码 }</p><p><strong>应该用点语法 Person.prototype.xxx = 新的属性或方法</strong></p><p>总之：虽然 JS 提供了修改原型的方法，但是不建议修改原型，修改原型会使代码变得复杂</p><h3 id="_9-instanceof和hasown" tabindex="-1"><a class="header-anchor" href="#_9-instanceof和hasown" aria-hidden="true">#</a> 9.instanceof和hasOwn</h3><p>instanceof 用来检查一个对象是否是一个类的实例，返回布尔值</p><ul><li>instanceof 检查的是对象的原型链上是否有该类实例, 只要原型链上有该类实例，就会返回 true</li><li>Object 是所有对象的原型，所以任何对象和 Object 进行 instanceof 运算都会返回 true</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">class</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">Dog</span> <span class="token keyword">extends</span> <span class="token class-name">Animal</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token keyword">const</span> dog <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Dog</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>dog <span class="token keyword">instanceof</span> <span class="token class-name">Dog</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>dog <span class="token keyword">instanceof</span> <span class="token class-name">Animal</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>dog <span class="token keyword">instanceof</span> <span class="token class-name">Object</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>读取一个实例的原型，有 2 种方式, 使用哪种都可以：</p><p>1- 实例对象.<strong><strong>proto</strong></strong></p><p>2- 类名.prototype</p><p>这 2 种方式访问的都是同一个东西，比较二者的返回值，返回的是 true</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
  name <span class="token operator">=</span> <span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">;</span>
  age <span class="token operator">=</span> <span class="token number">18</span><span class="token punctuation">;</span>

  <span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;Hello，我是&quot;</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//读取实例 p 的原型</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>__proto__<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token class-name">Person</span><span class="token punctuation">.</span>prototype <span class="token operator">===</span> p<span class="token punctuation">.</span>__proto__<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>in</strong></p><ul><li>使用 in 运算符检查属性时，无论属性在对象自身还是在原型中，都会返回 true</li></ul><p><strong>对象.hasOwnProperty(属性名) (不推荐使用)</strong></p><ul><li>用来检查一个对象的自身是否含有某个属性，返回布尔值</li></ul><p><strong>Object.hasOwn(对象, 属性名)</strong></p><ul><li>用来检查一个对象的自身是否含有某个属性，返回布尔值</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
  name <span class="token operator">=</span> <span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">;</span>
  age <span class="token operator">=</span> <span class="token number">18</span><span class="token punctuation">;</span>

  <span class="token function">sayHello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;Hello，我是&quot;</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;sayHello&quot;</span> <span class="token keyword">in</span> p<span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token string">&quot;sayHello&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">.</span>__proto__<span class="token punctuation">.</span>__proto__<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span><span class="token string">&quot;hasOwnProperty&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span><span class="token function">hasOwn</span><span class="token punctuation">(</span>p<span class="token punctuation">,</span> <span class="token string">&quot;sayHello&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_10-旧类" tabindex="-1"><a class="header-anchor" href="#_10-旧类" aria-hidden="true">#</a> 10.旧类</h3><p>早期 JS 中，直接通过函数来定义类</p><ul><li>一个函数如果直接调用 xxx() 那么这个函数就是一个普通函数</li><li>一个函数如果通过 new 调用 new xxx() 那么这个函数就是一个构造函数</li></ul><p>function Person(){</p><p>}</p><p>等价于：</p><p>class Person{</p><p>}</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">var</span> Person <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 在构造函数中，this表示新建的对象</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name<span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>

    <span class="token comment">// this.sayHello = function(){</span>
    <span class="token comment">//     console.log(this.name)</span>
    <span class="token comment">// }//不建议这么创建方法，这么写每次创建对象的同时都要再写方法，麻烦</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// 向原型中添加属性（方法）</span>
  <span class="token class-name">Person</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">sayHello</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token comment">// 静态属性，就是类自身的属性</span>
  Person<span class="token punctuation">.</span>staticProperty <span class="token operator">=</span> <span class="token string">&quot;xxx&quot;</span><span class="token punctuation">;</span>
  <span class="token comment">// 静态方法，就是类自身的方法，不是实例对象的</span>
  Person<span class="token punctuation">.</span><span class="token function-variable function">staticMethod</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> Person<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">var</span> Animal <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">function</span> <span class="token function">Animal</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

  <span class="token keyword">return</span> Animal<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> Cat <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">function</span> <span class="token function">Cat</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

  <span class="token comment">// 继承Animal，原型继承，子类的原型 = 父类的实例</span>
  <span class="token class-name">Cat</span><span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Animal</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">return</span> Cat<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> cat <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Cat</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_11-new运算符" tabindex="-1"><a class="header-anchor" href="#_11-new运算符" aria-hidden="true">#</a> 11.new运算符</h3><p>new 运算符是创建对象时要使用的运算符</p><ul><li>使用 new 时，到底发生了哪些事情：</li></ul><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><ul><li>当使用 new 去调用一个函数时，这个函数将会作为构造函数调用，使用 new 调用函数时，将会发生这些事：</li></ul><ol><li>创建一个普通的 JS 对象（Object 对象 {}）, 为了方便，称其为新对象</li><li>将构造函数的 prototype 属性设置为新对象的原型</li><li>使用实参来执行构造函数，并且将新对象设置为函数中的 this</li><li>如果构造函数返回的是一个非原始值，则该值会作为 new 运算的返回值返回（千万不要这么做）</li></ol><p>如果构造函数的返回值是一个原始值或者没有指定返回值，则新的对象将会作为返回值返回</p><p>通常情况不会为构造函数指定返回值，也就是构造函数里无需 return 关键字，自动会返回对象</p><h3 id="_12-面向对象总结" tabindex="-1"><a class="header-anchor" href="#_12-面向对象总结" aria-hidden="true">#</a> 12.面向对象总结</h3><p>面向对象本质就是，编写代码时所有的操作都是通过对象来进行的。</p><p>面向对象的编程的步骤：</p><ol><li>找对象</li><li>搞对象</li></ol><p>学习对象的时候怎么学：</p><ol><li>明确这个对象代表什么，有什么用</li><li>如何获取到这个对象</li><li>如何使用这个对象（对象中的属性和方法）</li></ol><p><strong>JS 对象的分类，有 3 类</strong>：</p><p>1.内建对象</p><ul><li>由 ES 标准所定义的对象，可以直接使用</li><li>比如 Object Function String Number ....</li></ul><ol><li>宿主对象</li></ol><ul><li>由浏览器提供的对象，比如 document,window</li><li>BOM(用来操作浏览器的对象)、DOM(用来操作网页的对象)</li></ul><p>宿主就是语言运行的位置，比如：</p><ul><li><p>现在 JS 运行在浏览器中，那浏览器就是宿主</p></li><li><p>JS 在 Node 中运行，Node 就是宿主，</p></li><li><p>在 Deno 中运行，Deno 就是宿主，不同的运行环境就是不同的宿主</p><p>3.自定义对象</p></li><li><p>由开发人员自己创建的对象</p></li></ul><h2 id="数组-array" tabindex="-1"><a class="header-anchor" href="#数组-array" aria-hidden="true">#</a> 数组（Array）</h2><h3 id="_1-数组简介" tabindex="-1"><a class="header-anchor" href="#_1-数组简介" aria-hidden="true">#</a> 1.数组简介</h3><p><strong>数组是什么？</strong></p><blockquote><p>数组也是一种复合数据类型，在数组可以存储多个不同类型的数据。 数组中存储的是有序的数据，数组中的每个数据都有一个唯一的索引，可以通过索引来操作获取数据。 数组中存储的数据叫做元素。</p></blockquote><p>**1.索引（index）是一组大于0的整数 <strong>2.创建数组</strong> 通过Array()来创建数组，也可以通过[]来创建数组 <strong>3.向数组中添加元素</strong> 语法： 数组[索引] = 元素 <strong>4.读取数组中的元素</strong> 语法： 数组[索引] - 如果读取了一个不存在的元素，不好报错而是返回undefined <strong>5.length</strong></p><ul><li>获取数组的长度</li><li>获取的实际值就是数组的最大索引 + 1</li><li>向数组最后添加元素： 数组[数组.length] = 元素</li><li>length是可以修改的</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 使用数组时，应该避免非连续数组，因为它性能不好</span>
<span class="token comment">// arr[100] = 99</span>
<span class="token comment">// console.log(arr[1])</span>
<span class="token comment">// console.log(typeof arr) // object</span>
<span class="token comment">// console.log(arr.length)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_2-遍历数组" tabindex="-1"><a class="header-anchor" href="#_2-遍历数组" aria-hidden="true">#</a> 2.遍历数组</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>        <span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
            <span class="token comment">// 任何类型的值都可以成为数组中的元素</span>
            <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token string">&quot;hello&quot;</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;孙悟空&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">]</span>

            <span class="token comment">// 创建数组时尽量要确保数组中存储的数据的类型是相同</span>
            arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;猪八戒&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;沙和尚&quot;</span><span class="token punctuation">]</span>

            <span class="token comment">// console.log(arr)</span>

            <span class="token comment">/* 
                遍历数组
                    - 遍历数组简单理解，就是获取到数组中的每一个元素
            */</span>

            <span class="token comment">// console.log(arr[0])</span>
            <span class="token comment">// console.log(arr[1])</span>
            <span class="token comment">// console.log(arr[2])</span>

            arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;猪八戒&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;沙和尚&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;唐僧&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;白骨精&quot;</span><span class="token punctuation">]</span>

            <span class="token comment">// for(let i=0; i&lt;arr.length; i++){</span>
            <span class="token comment">//     console.log(arr[i])</span>
            <span class="token comment">// }</span>

            <span class="token comment">// for (let i = arr.length - 1; i &gt;= 0; i--) {</span>
            <span class="token comment">//     console.log(arr[i])</span>
            <span class="token comment">// }</span>

            <span class="token comment">/* 
                定义一个Person类，类中有两个属性name和age
                    然后创建几个Person对象，将其添加到一个数组中

                遍历数组，并打印未成年人的信息
            
            */</span>
            <span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
                <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> age</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> name
                    <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>

            <span class="token keyword">const</span> personArr <span class="token operator">=</span> <span class="token punctuation">[</span>
                <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">&quot;沙和尚&quot;</span><span class="token punctuation">,</span> <span class="token number">38</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">&quot;红孩儿&quot;</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span>

            <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span>personArr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                <span class="token keyword">if</span><span class="token punctuation">(</span>personArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>age <span class="token operator">&lt;</span> <span class="token number">18</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>personArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>


        <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_3-for-of语句" tabindex="-1"><a class="header-anchor" href="#_3-for-of语句" aria-hidden="true">#</a> 3.for-of语句</h3><blockquote><p>for-of语句可以用来遍历可迭代对象（包括 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer"><code>Array</code><span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a>，<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map" target="_blank" rel="noopener noreferrer"><code>Map</code><span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a>，<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set" target="_blank" rel="noopener noreferrer"><code>Set</code><span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a>，<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer"><code>String</code><span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a>，<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray" target="_blank" rel="noopener noreferrer"><code>TypedArray</code><span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a>，<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments" target="_blank" rel="noopener noreferrer">arguments<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 对象等等）</p></blockquote><p>语法：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">for</span><span class="token punctuation">(</span>变量 <span class="token keyword">of</span> 可迭代的对象<span class="token punctuation">)</span><span class="token punctuation">{</span>
    语句<span class="token operator">...</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>执行流程： for-of的循环体会执行多次，数组中有几个元素就会执行几次， 每次执行时都会将一个元素赋值给变量</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>            <span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;猪八戒&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;沙和尚&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;唐僧&quot;</span><span class="token punctuation">]</span>
            <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> value <span class="token keyword">of</span> arr<span class="token punctuation">)</span><span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
            <span class="token comment">// for(let value of &quot;hello&quot;){</span>
            <span class="token comment">//     console.log(value)</span>
            <span class="token comment">// }</span>


        <span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">&quot;花果山&quot;</span> <span class="token punctuation">}</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> value <span class="token keyword">in</span> obj<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token comment">//name address</span>
        <span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>备注：</p><p>JavaScript 原有的 <strong>for...in(遍历对象) 循环，能获得对象的键名</strong></p><p>ES6 提供<strong>for...of 循环，允许遍历获得值</strong></p><h3 id="_4-数组的方法" tabindex="-1"><a class="header-anchor" href="#_4-数组的方法" aria-hidden="true">#</a> 4.数组的方法</h3><p><strong>Array.isArray()</strong> - 用来检查一个对象是否是数组<br><strong>at()</strong> - 可以根据索引获取数组中的指定元素 - at可以接收负索引作为参数 <strong>concat()</strong> - 用来连接两个或多个数组 - 非破坏性方法，不会影响原数组，而是返回一个新的数组</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;孙悟空&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token comment">//true</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span><span class="token number">123</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        <span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;猪八戒&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;沙和尚&quot;</span><span class="token punctuation">]</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">at</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token comment">//沙和尚</span>
        <span class="token keyword">const</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;铁扇公主&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;牛魔王&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;红孩儿&quot;</span><span class="token punctuation">]</span>
        <span class="token keyword">const</span> arr3 <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>arr2<span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr2<span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr3<span class="token punctuation">)</span><span class="token comment">//[&#39;孙悟空&#39;, &#39;猪八戒&#39;, &#39;沙和尚&#39;, &#39;铁扇公主&#39;, &#39;牛魔王&#39;, &#39;红孩儿&#39;]</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>indexOf()</strong> - 获取元素在数组中第一次出现的索引 - <strong>参数：</strong> 1.要查询的元素 2.要查询的起始位置 <strong>lastIndexOf()</strong> - 获取元素在数组中最后一次出现的位置 - 返回值： 找到了则返回元素的索引， 没有找到返回-1</p><p><strong>join()</strong> - 将一个数组中的元素连接为一个字符串 - [&quot;孙悟空&quot;, &quot;猪八戒&quot;, &quot;沙和尚&quot;, &quot;唐僧&quot;, &quot;沙和尚&quot;] -&gt; &quot;孙悟空猪八戒沙和尚唐僧沙和尚&quot; - 参数： 指定一个字符串作为连接符 <strong>slice()</strong> - 用来截取数组（非破坏性方法） <strong>slice()方法返回一个新的数组对象</strong> - 参数： 1. 截取的起始位置（包括该位置） 2. 截取的结束位置（不包括该位置）<br> - 第二个参数可以省略不写，如果省略则会一直截取到最后 - 索引可以是负值 如果将两个参数全都省略，则可以对数组进行浅拷贝（浅复制）</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token comment">//0</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;沙和尚&quot;</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token comment">//-1</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span><span class="token string">&quot;沙和尚&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token comment">//2</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot;,&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        
        <span class="token keyword">const</span> arr2 <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token comment">// arr2[0] = &quot;白骨精&quot;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">111</span><span class="token punctuation">,</span>arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr2<span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>forEach()</strong> - 用来遍历数组 - 它需要一个回调函数作为参数，这个回调函数会被调用多次 数组中有几个元素，回调函数就会调用几次 每次调用，都会将数组中的数据作为参数传递 - 回调函数中有三个参数： element 当前的元素 index 当前元素的索引 array 被遍历的数组</p><p><strong>filter()</strong> - 将数组中符合条件的元素保存到一个新数组中返回 - 需要一个回调函数作为参数，会为每一个元素去调用回调函数，并根据返回值来决定是否将元素添加到新数组中 - 非破坏性方法，不会影响原数组</p><p><strong>map()</strong> - 根据当前数组生成一个新数组 - 需要一个回调函数作为参数，回调函数的返回值会成为新数组中的元素 - 非破坏性方法不会影响原数组</p><p><strong>reduce()</strong> - 可以用来将一个数组中的所有元素整合为一个值 - 参数： 1. 回调函数，通过回调函数来指定合并的规则 2. 可选参数，初始值</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>        <span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;a&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;b&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;e&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;d&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;c&quot;</span><span class="token punctuation">]</span>
	arr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> index<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
	 arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">]</span>
        <span class="token comment">// 获取数组中的所有偶数</span>
        <span class="token keyword">let</span> result <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">ele</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> ele<span class="token operator">%</span><span class="token number">2</span><span class="token operator">===</span><span class="token number">0</span><span class="token punctuation">)</span>
        
        result <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">ele</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> ele <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
        arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;猪八戒&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;沙和尚&quot;</span><span class="token punctuation">]</span>
        result <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">ele</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token string">&quot;&lt;li&gt;&quot;</span> <span class="token operator">+</span> ele <span class="token operator">+</span> <span class="token string">&quot;&lt;/li&gt;&quot;</span><span class="token punctuation">)</span>

        result <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a <span class="token operator">+</span> b<span class="token punctuation">)</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_5-数组的方法-破坏性" tabindex="-1"><a class="header-anchor" href="#_5-数组的方法-破坏性" aria-hidden="true">#</a> 5.数组的方法（破坏性）</h3><p><strong>push()</strong> - 向数组的末尾添加一个或多个元素，并返回新的长度 <strong>pop()</strong> - 删除并返回数组的最后一个元素 <strong>unshift()</strong> - 向数组的开头添加一个或多个元素，并返回新的长度 <strong>shift()</strong> - 删除并返回数组的第一个元素 <strong>splice()</strong> - 可以删除、插入、替换数组中的元素 - 参数： 1. 删除的起始位置 2. 删除的数量 3. 要插入的元素 - 返回值： - 返回被删除的元素 <strong>reverse()</strong> - 反转数组 - 返回值： - 颠倒后的数组。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;猪八戒&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;沙和尚&quot;</span><span class="token punctuation">]</span>
<span class="token comment">// console.log(arr.push(&quot;唐僧&quot;))</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;-----&quot;</span><span class="token punctuation">)</span>
arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;猪八戒&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;沙和尚&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;唐僧&quot;</span><span class="token punctuation">]</span>
<span class="token comment">// console.log(arr.splice(1, 2,&quot;牛魔王&quot;)) </span>
<span class="token comment">// console.log(arr)</span>
arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;a&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;b&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;c&quot;</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>sort()</strong> - sort用来对数组进行排序（会改变原数组） - sort默认会将数组升序排列 注意：sort默认会按照Unicode编码进行排序，所以如果直接通过sort对数字进行排序 可能会得到一个不正确的结果<br> - 参数： - 可以传递一个回调函数作为参数，通过回调函数来指定排序规则 (a, b) =&gt; a - b 升序排列 (a, b) =&gt; b - a 降序排列</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;a&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;b&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;e&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;d&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;c&quot;</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a <span class="token operator">-</span> b<span class="token punctuation">)</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>##浅拷贝和深拷贝</p><p><strong>浅拷贝（shallow copy）</strong></p><ul><li>通常对对象的拷贝都是浅拷贝</li><li>浅拷贝顾名思义，只对对象的浅层进行复制（只复制一层）</li><li>如果对象中存储的数据是原始值，那么拷贝的深浅是不重要</li><li>浅拷贝只会对对象本身进行复制，不会复制对象中的属性（或元素）</li></ul><p><strong>深拷贝（deep copy）</strong></p><ul><li>深拷贝指不仅复制对象本身，还复制对象中的属性和元素</li><li>因为性能问题，通常情况不太使用深拷贝</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>        <span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;孙悟空&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;猪八戒&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
        <span class="token keyword">const</span> arr2 <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

        <span class="token keyword">const</span> arr3 <span class="token operator">=</span>  <span class="token function">structuredClone</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token comment">//专门用来深拷贝的方法</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="复制的方式" tabindex="-1"><a class="header-anchor" href="#复制的方式" aria-hidden="true">#</a> 复制的方式</h2><h3 id="_1-对象的复制" tabindex="-1"><a class="header-anchor" href="#_1-对象的复制" aria-hidden="true">#</a> 1.对象的复制</h3><p><img src="/javascriptImages/js内存地址.png" alt="66877382984"></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">/* 
    对象的复制
        - Object.assign(目标对象,被拷贝的对象)
        - 将被拷贝对象中的属性复制到目标对象，并将目标对象返回
    
    - 也可以使用展开运算符对对象进行复制
*/</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span> <span class="token punctuation">}</span>
<span class="token comment">// const obj2 = Object.assign({}, obj)</span>
<span class="token keyword">const</span> obj2 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">&quot;花果山&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">28</span> <span class="token punctuation">}</span>
Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>obj2<span class="token punctuation">,</span> obj<span class="token punctuation">)</span>
<span class="token comment">// console.log(obj2)</span>
<span class="token comment">// 这里也会有同属性覆盖的情况，具体看代码顺序</span>
<span class="token keyword">const</span> obj3 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">&quot;高老庄&quot;</span><span class="token punctuation">,</span> <span class="token operator">...</span>obj<span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">48</span> <span class="token punctuation">}</span> <span class="token comment">// 将obj中的属性在新对象中展开</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_2-数组的复制" tabindex="-1"><a class="header-anchor" href="#_2-数组的复制" aria-hidden="true">#</a> 2.数组的复制</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>        <span class="token comment">// const arr = [{ name: &quot;孙悟空&quot; }, { name: &quot;猪八戒&quot; }]</span>
        <span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;猪八戒&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;沙和尚&quot;</span><span class="token punctuation">]</span>
        <span class="token keyword">const</span> arr2 <span class="token operator">=</span> arr
        <span class="token comment">/* 
            ...(展开运算符)
                - 可以将一个数组中的元素展开到另一个数组中或者作为函数的参数传递
                - 通过它也可以对数组进行浅拷贝

        */</span>
        <span class="token keyword">const</span> arr3 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>arr<span class="token punctuation">]</span>
        arr3<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">&quot;白骨精&quot;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr2<span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr3<span class="token punctuation">)</span>

        <span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> a <span class="token operator">+</span> b <span class="token operator">+</span> c
        <span class="token punctuation">}</span>

        <span class="token keyword">const</span> arr4 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span>
        <span class="token comment">// console.log(sum(...arr4)) </span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="代码块" tabindex="-1"><a class="header-anchor" href="#代码块" aria-hidden="true">#</a> 代码块</h2><p>使用花括号{ } 来创建代码块，代码块可以用来对代码进行分组，</p><p>同一个代码中的代码，就是同一组代码，一个代码块中的代码要么都执行要么都不执行</p><p>let 和 var</p><ul><li>在 JS 中，使用 let 声明的变量具有块作用域, 在代码块中声明的变量无法在代码块的外部访问</li><li>使用 var 声明的变量，不具有块作用域</li></ul><h2 id="作用域链复习" tabindex="-1"><a class="header-anchor" href="#作用域链复习" aria-hidden="true">#</a> 作用域链复习</h2><p>作用域（scope）</p><ul><li>作用域指的是一个变量的可见区域</li><li>作用域有两种：全局和局部</li></ul><p><strong>全局作用域</strong></p><ul><li>全局作用域在网页运行时创建，在网页关闭时销毁</li><li>所有直接编写到 script 标签中的代码都位于全局作用域中</li><li>全局作用域中的变量是全局变量，可以在任意位置访问</li></ul><p><strong>局部作用域</strong></p><ul><li>块作用域</li><li>块作用域是一种局部作用域</li><li>块作用域在代码块执行时创建，代码块执行完毕它就销毁</li><li>在块作用域中声明的变量是局部变量，只能在块内部访问，外部无法访问</li></ul><p><strong>函数作用域</strong></p><ul><li>函数作用域也是一种局部作用域</li><li>函数作用域在函数调用时产生，调用结束后销毁</li><li>函数每次调用都会产生一个全新的函数作用域</li><li>在函数中定义的变量是局部变量，只能在函数内部访问，外部无法访问</li></ul><p>在开发中应该尽量减少直接在全局作用域中编写代码！所以我们的代码要尽量编写的局部作用域. 如果使用 let 声明的变量，可以使用花括号{ }来创建块作用域</p><p><strong>作用域链</strong></p><ul><li>当我们使用一个变量时， JS 解释器会优先在当前作用域中寻找变量，</li></ul><p>如果找到了则直接使用</p><p>如果没找到，则去上一层作用域中寻找，找到了则使用</p><p>如果没找到，则继续去上一层寻找，以此类推</p><p>如果一直到全局作用域都没找到，则报错 xxx is not defined</p><h2 id="window对象" tabindex="-1"><a class="header-anchor" href="#window对象" aria-hidden="true">#</a> window对象</h2><p><strong>Window 对象</strong></p><ul><li>在浏览器中，浏览器为我们提供了一个 window 对象，可以直接访问</li><li>window 对象代表的是浏览器窗口，通过该对象可以对浏览器窗口进行各种操作</li></ul><p>除此之外<strong>window 对象还负责存储 JS 中的内置对象和浏览器的宿主对象</strong></p><ul><li>window 对象的属性可以通过 window 对象访问，也可以直接访问</li><li>函数就可以认为是 window 对象的方法</li></ul><p>向window中添加的属性会自动成为全局变量</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>window<span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token number">10</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p><strong>内置对象</strong>：JS 标准已经定义好的对象，存储在 window 对象中，可以直接使用，</p><p>比如：Number(), String()</p><p><strong>宿主对象</strong>：由浏览器提供的对象，也存储在 window 对象中，可以直接使用,</p><p>比如：document.write(), console.log()</p><p>备注：</p><p>var 用来声明变量，作用和 let 相同，但是 var 不具有块作用域</p><ul><li>在全局中使用 var 声明的变量，都会作为 window 对象的属性保存</li><li>使用 function 声明的函数，都会作为 window 的方法保存</li><li>使用 let 声明的变量不会存储在 window 对象中，而存在一个秘密的小地方（无法访问）</li><li>var 虽然没有块作用域，但有函数作用域</li></ul><h2 id="提升" tabindex="-1"><a class="header-anchor" href="#提升" aria-hidden="true">#</a> 提升</h2><p>变量的提升</p><ul><li><p>使用 var 声明的变量，它会在所有代码执行前被声明, 所以我们可以在变量声明前就访问变量</p></li><li><p>**变量的提升毫无意义 **</p></li></ul><p>函数的提升</p><ul><li>使用函数声明创建的函数，会在其他代码执行前被创建, 所以我们可以在函数声明前调用函数</li><li>函数表达式没有函数提升，比如：let fn = function(){ ... } 不存在提升</li></ul><p>let 声明的变量实际也会提升，但是在赋值之前解释器禁止对该变量的访问</p><h2 id="浅拷贝-深拷贝-对象的复制" tabindex="-1"><a class="header-anchor" href="#浅拷贝-深拷贝-对象的复制" aria-hidden="true">#</a> 浅拷贝 - 深拷贝 - 对象的复制</h2><p><strong>浅拷贝（shallow copy - la copie superficielle）</strong></p><ul><li>通常对对象的拷贝都是浅拷贝</li><li>浅拷贝顾名思义，只对对象的浅层进行复制（只复制一层）</li><li>如果对象中存储的数据是原始值，那么拷贝的深浅是不重要</li><li>浅拷贝只会对对象本身进行复制，不会复制对象中的属性（或元素）</li></ul><p><strong>深拷贝（deep copy - la copie profonde）</strong></p><ul><li>深拷贝指不仅复制对象本身，还复制对象中的属性和元素</li><li>因为性能问题，通常情况不太使用深拷贝</li><li><strong>JS 中专门用来深拷贝的方法：structuredClone()</strong></li></ul><p>浅拷贝只复制属性指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存，修改对象属性会影响原对象</p><p>但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象</p><p>开发中根据具体需求选择浅拷贝或深拷贝</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">,</span>
  <span class="token literal-property property">friend</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;猪八戒&quot;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// 对obj进行浅复制(浅拷贝)</span>
<span class="token keyword">const</span> obj2 <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> obj<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 对obj进行深复制(深拷贝)</span>
<span class="token keyword">const</span> obj3 <span class="token operator">=</span> <span class="token function">structuredClone</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 利用JSON来完成深复制(深拷贝)</span>
<span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> obj4 <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>对象的浅拷贝方式</strong></p><p><strong>注意：对象的复制一定会产生新的对象</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 如何去复制一个对象 复制必须要产生新的对象才是复制</span>
<span class="token comment">// 当调用slice时，会产生一个新的数组对象，从而完成对数组的复制</span>
<span class="token keyword">const</span> arr3 <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>... (展开运算符)</strong></p><ul><li>可以将一个数组中的元素展开到另一个数组中</li><li>或者作为函数的参数传递</li><li>通过它也可以对数组进行浅拷贝</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> a <span class="token operator">+</span> b <span class="token operator">+</span> c<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> arr4 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token operator">...</span>arr4<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 把数组arr4里的元素作为实参传递给了sum函数</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 给数组添加新元素</span>
<span class="token keyword">let</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">&quot;this&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;is&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;an&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>arr1<span class="token punctuation">,</span> <span class="token string">&quot;apple&quot;</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr1<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [ &#39;this&#39;, &#39;is&#39;, &#39;an&#39;, &#39;apple&#39; ]</span>

<span class="token comment">//合并数组，参数排列顺序不同，结果不同</span>
<span class="token keyword">const</span> arr1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">6</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> arr3 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>arr1<span class="token punctuation">,</span> <span class="token operator">...</span>arr2<span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr3<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [ 1, 2, 3, 4, 5, 6 ]</span>

<span class="token keyword">const</span> arr4 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>arr2<span class="token punctuation">,</span> <span class="token operator">...</span>arr1<span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr4<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [4, 5, 6, 1, 2, 3];</span>

<span class="token comment">// 多个数组的合并</span>
<span class="token keyword">const</span> output <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>arr1<span class="token punctuation">,</span> <span class="token operator">...</span>arr2<span class="token punctuation">,</span> <span class="token operator">...</span>arr3<span class="token punctuation">,</span> <span class="token operator">...</span>arr4<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>对象的复制</strong></p><ul><li>Object.assign(目标对象, 被复制的对象)</li><li>将被复制对象中的属性复制到目标对象里，并将目标对象返回</li><li>也可以使用展开运算符对对象进行复制</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// const obj2 = Object.assign({}, obj)</span>
<span class="token keyword">const</span> obj2 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">&quot;花果山&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">28</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>obj2<span class="token punctuation">,</span> obj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 将obj中的属性在新对象中展开</span>
<span class="token comment">// console.log(obj2)</span>

<span class="token keyword">const</span> obj3 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">address</span><span class="token operator">:</span> <span class="token string">&quot;高老庄&quot;</span><span class="token punctuation">,</span> <span class="token operator">...</span>obj<span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">48</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>通过...展开运算符合并对象</strong></p><ul><li>对象添加时会覆盖原先数据,所以在添加时需要把原数据写上</li><li>注意：未添加…展开运算符时会显示添加整个数组或对象,而不是单个元素</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;Tom&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">18</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> temp <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">gender</span><span class="token operator">:</span> <span class="token string">&quot;male&quot;</span><span class="token punctuation">,</span> <span class="token literal-property property">girlfriend</span><span class="token operator">:</span> <span class="token string">&quot;Mary&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">//将temp添加到obj里,后面的参数添加到前面的参数里面</span>
obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span>obj<span class="token punctuation">,</span> <span class="token operator">...</span>temp <span class="token punctuation">}</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// {name:&#39;Tom&#39;,age:18,gender:&#39;male&#39;,girlfriend:&#39;Mary}</span>
<span class="token keyword">let</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出整个数组[1,2,3,4,5]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出数组的单个元素1 2 3 4 5</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="闭包" tabindex="-1"><a class="header-anchor" href="#闭包" aria-hidden="true">#</a> 闭包</h2><blockquote><p>闭包就是能访问到外部函数作用域中变量的函数</p></blockquote><p><strong>什么时候使用</strong>：</p><p>当我们需要隐藏一些不希望被别人访问的内容时就可以使用闭包</p><p><strong>构成闭包的要件</strong>：</p><ol><li>函数的嵌套</li><li>内部函数要引用外部函数中的变量</li><li>内部函数要作为返回值返回</li></ol><p><strong>简单理解闭包操作</strong>：</p><p>把一个函数 x 和变量定义在另一个函数 y 里，同时一定要在 y 里 return 函数 x,</p><p>然后调用 y，这就是闭包</p><p>注意：由于 y 返回的 x 是个函数，要拿到结果，还要再调用 x，即 x()</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 函数 outer前套了一个箭头函数，并且内部的箭头函数作为返回值返回</span>
<span class="token keyword">function</span> <span class="token function">outer</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> num <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">// 位于函数作用域中</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">//内部函数要作为返回值返回</span>
    num<span class="token operator">++</span><span class="token punctuation">;</span> <span class="token comment">// 内部函数引用外部函数中的变量 num</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> newFn <span class="token operator">=</span> <span class="token function">outer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 注意newFn接收的是一个函数</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>newFn<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">newFn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// newFn是一个函数，只有调用了才有结果</span>
<span class="token function">newFn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>函数的作用域，在函数创建时就已经确定的（也称<strong>词法作用域</strong>）, 和调用的位置无关。</p><p>闭包利用的就是词法作用域, 词法作用域要看定义函数时函数的位置，函数的外层作用域取决于在哪个位置定义的函数。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token string">&quot;全局变量a&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 这里定义了函数fn，fn的外层作用域就是全局作用域</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">fn2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token string">&quot;fn2中的a&quot;</span><span class="token punctuation">;</span>

  <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">fn2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;全局变量a&quot;, 函数fn的外层作用域是全局</span>

<span class="token keyword">function</span> <span class="token function">fn3</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token string">&quot;fn3中的a&quot;</span><span class="token punctuation">;</span>

  <span class="token keyword">function</span> <span class="token function">fn4</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 这里定义了函数fn4，fn4的外层作用域就是函数fn3</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">return</span> fn4<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> fn4 <span class="token operator">=</span> <span class="token function">fn3</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">fn4</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// &quot;fn3中的a&quot;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>闭包的生命周期：</strong></p><ol><li>闭包在外部函数调用时产生，外部函数每次调用都会产生一个全新的闭包。</li><li>在内部函数丢失时销毁（也就是内部函数被垃圾回收了，闭包才会消失）。</li></ol><p><strong>闭包的注意事项：</strong></p><p>闭包主要用来隐藏一些不希望被外部访问的内容，这就意味着闭包需要占用一定的内存空间，相较于类来说，闭包比较浪费内存空间（类可以使用原型而闭包不能）。</p><ul><li>需要执行次数较少时，使用闭包，一般闭包就需要一个，最多 2，3 个，而且闭包的每个对象，每个属性，每个方法都会独立的占用一个内存，很浪费内存。</li><li>需要大量创建实例时，使用类。</li></ul><p>根据使用 JS 的经验，一般需要隐藏的一些东西不需要创建大量实例，所以几乎我们藏东西的时候使用闭包没问题。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">outer2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> num <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    num<span class="token operator">++</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> fn1 <span class="token operator">=</span> <span class="token function">outer2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// fn1是独立闭包，fn2也是独立闭包，</span>
<span class="token keyword">let</span> fn2 <span class="token operator">=</span> <span class="token function">outer2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// fn1和fn2是相互独立的，因为外部函数每次调用都会产生一个全新的闭包</span>

<span class="token function">fn1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">fn2</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

fn1 <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token comment">// 清除内存</span>
fn2 <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="递归" tabindex="-1"><a class="header-anchor" href="#递归" aria-hidden="true">#</a> 递归</h2><blockquote><p>调用自身的函数称为递归函数 递归的作用和循环是基本一致</p></blockquote><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>        <span class="token comment">// 创建一个函数，可以用来求任意数的阶乘</span>
        <span class="token comment">/* 
            1! 1
            2! 1 x 2 = 2
        */</span>
        <span class="token keyword">function</span> <span class="token function">factorial</span><span class="token punctuation">(</span><span class="token parameter">num</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// 创建一个变量用来记录结果</span>
            <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token number">1</span>
            <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> num<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                result <span class="token operator">*=</span> i
            <span class="token punctuation">}</span>
            <span class="token keyword">return</span> result
        <span class="token punctuation">}</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">factorial</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如何用递归解决阶乘的问题？ 5! = 4! x 5 4! = 3! x 4 3! = 2! x 3 2! = 1! x 2 1! = 1</p><p>递归的核心思想就是将一个大的问题拆分为一个个小的问题，小的问题解决了，大的问题也就解决了。</p><p><strong>编写递归函数，一定要包含有两个要件：</strong> 1.基线条件 ----- 递归的终止条件 2.递归条件 ----- 如何对问题进行拆分</p><p>递归的作用和循环是一致的，不同点在于，递归的思路比较清晰简洁，循环的执行性能比较好。在开发中，一般的问题都可以通过循环解决，也是尽量去使用循环，少用递归。只在一些使用循环比较麻烦的场景下，才使用递归。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>	<span class="token comment">/*
	    5! = 4! x 5
            4! = 3! x 4
            3! = 2! x 3
            2! = 1! x 2
            1! = 1
	*/</span>        
	<span class="token keyword">function</span> <span class="token function">factorial2</span><span class="token punctuation">(</span><span class="token parameter">num</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment">// 基线条件</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>num <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">return</span> <span class="token number">1</span>
            <span class="token punctuation">}</span>
            <span class="token comment">// 递归条件</span>
            <span class="token comment">// num! = (num-1)! * num</span>
            <span class="token keyword">return</span> <span class="token function">factorial2</span><span class="token punctuation">(</span>num <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">*</span> num
        <span class="token punctuation">}</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">factorial2</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="函数补充" tabindex="-1"><a class="header-anchor" href="#函数补充" aria-hidden="true">#</a> 函数补充</h2><h3 id="_1-arguments-可变参数" tabindex="-1"><a class="header-anchor" href="#_1-arguments-可变参数" aria-hidden="true">#</a> 1.arguments-可变参数</h3><p><strong>arguments</strong> - <code>arguments</code>是函数中又一个隐含参数 - <code>arguments</code>是一个类数组对象（伪数组） 和数组相似，可以通过索引来读取元素，也可以通过for循环变量，但是它不是一个数组对象，不能调用数组的方法。 - arguments用来存储函数的实参，无论用户是否定义形参，实参都会存储到arguments对象中，可以通过该对象直接访问实参。</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>        <span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token number">0</span>
            <span class="token comment">// for (let i = 0; i &lt; arguments.length; i++) { </span>
            <span class="token comment">//     result +=arguments[i]</span>
            <span class="token comment">// }</span>
            <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> num <span class="token keyword">of</span> arguments<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                result <span class="token operator">+=</span> num
            <span class="token punctuation">}</span>
            <span class="token keyword">return</span> result
        <span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>可变参数</strong>，在定义函数时可以将参数指定为可变参数 - 可变参数可以接收任意数量实参，并将他们统一存储到一个数组中返回。 - 可变参数的作用和arguments基本是一致，但是也具有一些不同点： 1. 可变参数的名字可以自己指定 2. 可变参数就是一个数组，可以直接使用数组的方法 3. 可变参数可以配合其他参数一起使用</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>        <span class="token keyword">function</span> <span class="token function">sum2</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>num</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> num<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a <span class="token operator">+</span> b<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>

        <span class="token keyword">function</span> <span class="token function">fn2</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> <span class="token operator">...</span>arg</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arg<span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_2-call和apply" tabindex="-1"><a class="header-anchor" href="#_2-call和apply" aria-hidden="true">#</a> 2.call和apply</h3><p>根据函数调用方式的不同，this的值也不同： 1. 以函数形式调用，this是window 2. 以方法形式调用，this是调用方法的对象 3. 构造函数中，this是新建的对象 4. 箭头函数没有自己的this，由外层作用域决定 5. 通过call和apply调用的函数，它们的第一个参数就是函数的this 6. 通过bind返回的函数，this由bind第一个参数决定（无法修改）</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>        <span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;函数执行了&quot;</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;孙悟空&quot;</span><span class="token punctuation">,</span>
            fn
        <span class="token punctuation">}</span>
         <span class="token comment">// fn.call(obj)</span>
        <span class="token comment">// fn.apply(obj)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>调用函数除了通过 函数() 这种形式外，还可以通过其他的方式来调用函数 比如，我们可以通过调用函数的call()和apply()两个方法来调用函数 函数.call() 函数.apply() - call 和 apply除了可以调用函数，还可以用来指定函数中的this - call和apply的第一个参数，将会成为函数的this - 通过<code>call</code>方法调用函数，<strong>函数的实参直接在第一个参数后一个一个的列出来</strong> - 通过<code>apply</code>方法调用函数，<strong>函数的实参需要通过一个数组传递</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>        <span class="token keyword">function</span> <span class="token function">fn2</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;a =&quot;</span><span class="token punctuation">,</span> a<span class="token punctuation">,</span> <span class="token string">&quot;b =&quot;</span><span class="token punctuation">,</span> b<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>

        <span class="token comment">// fn2.call(obj, &quot;hello&quot;, true)</span>
        <span class="token function">fn2</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">&quot;hello&quot;</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_3-bind" tabindex="-1"><a class="header-anchor" href="#_3-bind" aria-hidden="true">#</a> 3.bind</h3><blockquote><p>通过bind返回的函数，this由bind第一个参数决定（无法修改）</p></blockquote><p>bind() 是函数的方法，可以用来创建一个新的函数 - bind可以为新函数绑定this - bind可以为新函数绑定参数</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>        <span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;fn执行了~~~~&quot;</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">)</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">,</span> c<span class="token punctuation">)</span>
        <span class="token punctuation">}</span>

        <span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;孙悟空&quot;</span> <span class="token punctuation">}</span>

        <span class="token keyword">const</span> newFn <span class="token operator">=</span> <span class="token function">fn</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>箭头函数没有自身的this，它的this由外层作用域决定，也无法通过call apply 和 bind修改它的this，箭头函数中也没有arguments。</p><h2 id="map" tabindex="-1"><a class="header-anchor" href="#map" aria-hidden="true">#</a> Map</h2><ul><li><p>Map用来存储键值对结构的数据（key-value）</p></li><li><p>Object中存储的数据就可以认为是一种键值对结构</p></li><li><p>Map和Object的主要区别：</p><ol><li><p>Object中的属性名只能是字符串或符号（Symbol），如果传递了一个其他类型的属性名（不传字符串时指定属性名需要加[]），JS解释器会自动将其转换为字符串。</p></li><li><p>Map中任何类型的值都可以称为数据的key。</p></li></ol></li></ul><p><strong>创建：</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p><strong>属性和方法：</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>    map<span class="token punctuation">.</span><span class="token function">size</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//获取map中键值对的数量</span>
    map<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span>value<span class="token punctuation">)</span> <span class="token comment">//向map中添加键值对</span>
    map<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token comment">//根据key获取值</span>
    map<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token comment">//删除指定数据</span>
    map<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span><span class="token comment">//检查map中是否包含指定键</span>
    map<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">//删除全部的键值对</span>
    map<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">//获取所有键</span>
    map<span class="token punctuation">.</span><span class="token function">values</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">//获取所有值</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>将map转换为数组：</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//const arr = Array.from(map)</span>
<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>map<span class="token punctuation">]</span>
<span class="token comment">//数组转map</span>
<span class="token keyword">const</span> map2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token string">&quot;name&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;猪八戒&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">&quot;age&quot;</span><span class="token punctuation">,</span> <span class="token number">18</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">)</span>

map2<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> key</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> 
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span>key<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="set" tabindex="-1"><a class="header-anchor" href="#set" aria-hidden="true">#</a> Set</h2><blockquote><p>Set用来创建一个集合。 它的功能和数组类似，不同点在于set中不能存储重复的数据。</p></blockquote><p><strong>创建：</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>方法：</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>size <span class="token comment">//获取数量</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token comment">//添加元素</span>
<span class="token function">has</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//检查元素</span>
<span class="token keyword">delete</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//删除元素</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>数组去重：</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>        <span class="token keyword">const</span> arr2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1111</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1111</span><span class="token punctuation">,</span> <span class="token number">55</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">55</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span>
        <span class="token keyword">const</span> set2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr2<span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr2<span class="token punctuation">)</span> <span class="token comment">//[1111, 2, 2, 2, 2, 1111, 55, 23, 23, 55, 2, 5, 4, 8, 8, 8, 9, 9, 10]</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span>set2<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">//[1111, 2, 55, 23, 5, 4, 8, 9, 10]</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="数组补充方法" tabindex="-1"><a class="header-anchor" href="#数组补充方法" aria-hidden="true">#</a> 数组补充方法</h2><h3 id="_1-every" tabindex="-1"><a class="header-anchor" href="#_1-every" aria-hidden="true">#</a> 1.every</h3><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> <span class="token function-variable function">isBelowThreshold</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">currentValue</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> currentValue<span class="token punctuation">.</span>cur <span class="token operator">&lt;</span> <span class="token number">40</span>

<span class="token keyword">const</span> array1 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">cur</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">cur</span><span class="token operator">:</span> <span class="token number">30</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">cur</span><span class="token operator">:</span> <span class="token number">29</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array1<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span>isBelowThreshold<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>

<span class="token keyword">const</span> array2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>array2<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span>isBelowThreshold<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果所有元素满足条件时返回true，否则为false。如果数组没有元素，则 every() 方法将返回 true。</p></div></div><footer class="page-meta"><div class="meta-item edit-link"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M2 26h28v2H2z" fill="currentColor"></path><path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Edit this page<!--]--></span></span></div><div class="meta-item last-updated"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Last Updated 2023/5/16 14:37:03<!--]--></span></span></div></footer><!----><!----></main><!--]--><div class="page-catalog-container"><h5 class="tip">ON THIS PAGE</h5><ul><!--[--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#严格模式" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="严格模式"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->严格模式<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#面向对象" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="面向对象"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->面向对象<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_1-类class" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.类class"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.类class<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_2-方法" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.方法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.方法<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_3-构造函数" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="3.构造函数"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->3.构造函数<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_4-封装" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="4.封装"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->4.封装<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_5-多态" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="5.多态"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->5.多态<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_6-继承" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="6.继承"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->6.继承<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_7-对象的结构" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="7.对象的结构"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->7.对象的结构<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_8-原型" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="8.原型"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->8.原型<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_9-instanceof和hasown" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="9.instanceof和hasOwn"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->9.instanceof和hasOwn<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_10-旧类" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="10.旧类"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->10.旧类<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_11-new运算符" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="11.new运算符"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->11.new运算符<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_12-面向对象总结" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="12.面向对象总结"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->12.面向对象总结<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#数组-array" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="数组（Array）"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->数组（Array）<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_1-数组简介" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.数组简介"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.数组简介<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_2-遍历数组" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.遍历数组"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.遍历数组<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_3-for-of语句" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="3.for-of语句"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->3.for-of语句<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_4-数组的方法" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="4.数组的方法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->4.数组的方法<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_5-数组的方法-破坏性" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="5.数组的方法（破坏性）"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->5.数组的方法（破坏性）<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#复制的方式" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="复制的方式"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->复制的方式<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_1-对象的复制" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.对象的复制"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.对象的复制<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_2-数组的复制" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.数组的复制"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.数组的复制<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#代码块" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="代码块"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->代码块<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#作用域链复习" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="作用域链复习"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->作用域链复习<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#window对象" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="window对象"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->window对象<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#提升" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="提升"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->提升<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#浅拷贝-深拷贝-对象的复制" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="浅拷贝 - 深拷贝 - 对象的复制"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->浅拷贝 - 深拷贝 - 对象的复制<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#闭包" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="闭包"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->闭包<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#递归" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="递归"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->递归<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#函数补充" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="函数补充"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->函数补充<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_1-arguments-可变参数" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.arguments-可变参数"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.arguments-可变参数<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_2-call和apply" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.call和apply"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.call和apply<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_3-bind" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="3.bind"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->3.bind<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#map" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="Map"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Map<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#set" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="Set"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Set<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#数组补充方法" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="数组补充方法"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->数组补充方法<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/javascript-note/jsbiji2.html#_1-every" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.every"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.every<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--]--></ul></div></div></div></div><!----><!----><!--]--></div>
    <script type="module" src="/assets/app-5e55c3a9.js" defer></script>
  </body>
</html>
